<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>语音识别</title>
	<link rel="stylesheet" type="text/css" href="css/ai-style.css">
	<link rel="stylesheet" type="text/css" href="css/voice-style.css">
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="js/record.js"></script>
	<script src="js/layer/layer.js"></script>
</head>
<body>
	<header></header>
	<div class="main">
		<div class="left">
			<ul>
				<li><img src="images/yuyinhc.svg"><a href="yuyinhc.html">语音合成</a></li>
				<li class="active"><img src="images/yuyinsb_active.svg"><a href="yuyinsb.html">语音识别</a></li>
				<li><img src="images/wenzi.svg"><a href="wenzi.html">文字识别</a></li>
				<li><img src="images/renlian.svg"><a href="renlian.html">人脸识别</a></li>
				<li><img src="images/tuxiang.svg"><a href="tuxiang.html">图像识别</a></li>
			</ul>
		</div>
		<div class="right">
			<p>了解语音识别</p>
			<p>即时识别语音，开始说话前请确保麦克风正常</p>
			<div class="yuyin-box yuyinsb">
				<div class="tip-title">Hi...点击按钮开始说话</div>
				<div class="record-btn">
					<img src="images/record.svg">
					<div class="liner-box">
					    <span class="lines">
					      <hr class="hr hr1">
					      <hr class="hr hr2">
					      <hr class="hr hr3">
					      <hr class="hr hr4">
					      <hr class="hr hr5">
					      <hr class="hr hr6">
					      <hr class="hr hr7">
					      <hr class="hr hr8">
					      <hr class="hr hr9">
					      <hr class="hr hr10">
					    </span>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	var recorder = null;
	$('.record-btn').click(function(){
		if($(this).find('img').css('display')=='block'){
			$(this).find('img').hide();
			$(this).find('.liner-box').show();
			// 开始录音
			if (!recorder) {
		        recorder = new Recorder();
		        recorder.ready().then(() => {
		            recorder.start();
		        });
		    } else {
		        recorder.start();
		    }
		}else{
			$(this).find('.liner-box').hide();
			$(this).find('img').show();
			// 结束录音
			recorder.stop();
			// 获取录音PCM文件流
			var pcm = recorder.getPCMBlob()
			var formData = new FormData();
    		formData.append('file', pcm);
    		var index = layer.load(0, {shade: 0.7});
			// 远程识别
			$.ajax({
	    	url:"http://101.37.159.34:8000/getshibie",    //请求的url地址
		    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
			processData: false,
            contentType: false,
		    data:formData,  //参数值
		    type:"POST",   //请求方式
			dataType:'json',
		    beforeSend:function(){
		        //请求前的处理
		    },
		    success:function(res){
				layer.close(index);
		        //请求成功时处理
				if(res.err_no==0){
					$('.tip-title').text(res.result[0]);
				}
		    },
		    complete:function(){
		        //请求完成的处理
		    },
		    error:function(){
				layer.close(index);
		        //请求出错处理
		    }
		});
		}
	});
</script>